<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      background-color="#1F2935"
      text-color="#fff"
      active-text-color="#fff"
  >
    <el-menu-item index="0"><h2>众包平台后台管理系统</h2></el-menu-item>
    <div class="flex-grow"/>
    <div style="margin-top: 18px;margin-right: 5px;">
              <el-input
      v-model="input1"
      class="w-50 m-2"
      size="small"
      placeholder="Search for something..."
      :prefix-icon="Search"
    style="--el-input-bg-color: #161D26;--el-input-border-color: #1f2935;"></el-input>
    </div>
    <div class="demo-basic--circle">
      <div class="block">
        <el-avatar shape="square" :size="50" :src="squareUrl" />
      </div>
      <div v-for="size in sizeList" :key="size" class="block">
        <el-avatar shape="square" :size="size" :src="squareUrl" />
      </div>
    </div>
    <span style="line-height: 58px;margin-right: 10px;">
      <el-popconfirm title="确定要退出?"
                     confirmButtonText="退出"
                     cancelButtonText="取消"
                     @confirm="handleExit">
        <template #reference>
          <el-button type="primary" link>
            退出登录
          </el-button>
        </template>
      </el-popconfirm>
    </span>
  </el-menu>
</template>

<script setup lang="ts">
import router from "@/router";
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs } from 'vue'

const state = reactive({
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const input1 = ref('')

const handleExit = () => {
    localStorage.removeItem("token")
    router.push("/login")
}
</script>

<style scoped>
  .flex-grow {
    flex-grow: 1;
  }
  .demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>
